<template>
  <view class="iptv-container">
    <view class="header">
      <text class="title">IPTV直播</text>
      <button class="back-btn" @click="goBack">返回</button>
    </view>
    
    <view class="content">
      <ChannelList 
        :channels="channelList" 
        @select="changeChannel"
      />
      <Player 
        v-if="currentChannel" 
        :current-channel="currentChannel" 
      />
      <view v-else class="empty-tip">
        请选择频道
      </view>
    </view>
  </view>
</template>

<script>
import ChannelList from './components/channelList.vue'
import Player from './components/player.vue'
import { channelList } from '../../api/mywork/iptv/channel.js'

export default {
  components: {
    ChannelList,
    Player
  },
  data() {
    return {
      channelList: channelList,
      currentChannel: null
    }
  },
  created() {
    // 默认选择第一个频道
    if (this.channelList.length > 0) {
      this.currentChannel = this.channelList[0]
    }
  },
  methods: {
    changeChannel(channel) {
      this.currentChannel = channel
      // 在H5端需要手动重新加载视频
      if (process.env.VUE_APP_PLATFORM === 'h5') {
        this.$nextTick(() => {
          const video = document.getElementById('iptv-player')
          if (video) {
            video.load()
          }
        })
      }
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.iptv-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #2196F3;
  color: white;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.back-btn {
  background-color: transparent;
  color: white;
  border: none;
  font-size: 14px;
}

.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.empty-tip {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #999;
}
</style>